import React from "react"

class News  extends  React.Component{
            
      constructor(props){
           super(props)
           this.state = {

                title:"hello news",
                arr:["javascript","vue","angular","react"],
                arr2:[
                    {
                        id:1,
                        title:"1909B"
                    },
                    {
                        id:2,
                        title:"1909A"
                    },
                    {
                        id:3,
                        title:"1910A"
                    }
                ]
           }
            // 修改 fn1 方法内的this指向
            // this.fn1 = this.fn1.bind(this)

      }
     
      fn1(){

            //alert(1111111111)
            console.log(this)
            // this.state.title = "1909A"
            // this.forceUpdate()   // 强制更新
            this.setState({title:"1909A 2222222222222"},function(){

                console.log(this.state.title)  
                  
            }) 
            // setState()  更新状态的方法  修改状态一定要使用这个方法 不要直接赋值

           // console.log(this.state.title)
            
      }
      fn2(){
        
         console.log(this)


      }
      add(){
          
          var a1 = this.state.arr;

          a1.push("jquery")  

          this.setState({arr:a1})
      }

      add2 = ()=>{
 
        var a1 = this.state.arr;

        a1.push("avalon")  

        this.setState({arr:a1})

      }
      render(){

          var a1 = [<li>111111</li>,<li>222222222</li>]
         
            return <div>

                       <h3 onClick={ this.fn1.bind(this) } >
                           { this.state.title }
                       </h3>
                       <ul>
                            {
                                this.state.arr.map((item)=>{

                                      return <li onClick={ (e)=>{ this.fn2(e) } } >
                                                 { item }
                                             </li>

                                })
                            }
                       </ul>
                       <input type="button"  onClick={ (e)=>{ this.add(e) } } />
                       <input type="button" onClick={ this.add2 }  />
                      <ul>
                          {
                              this.state.arr2.map((item)=>{


                                      return <li key={ item.id }>
                                                   {
                                                       item.title
                                                   }
                                             </li>
                              })
                          }
                      </ul>


            </div>

      }

}

export default News